<template>
  <!--大模型仓库-->
  <div style="height: 100%">
    <HuilanBasic v-if="processContainer">
      <HuilanBasicToolbar style="margin-top: 0">
        <!--新增-->
        <el-button
          type="success"
          size="small"
          @click="handlerClickAdd"
        >
          {{$t('aiccCommon.add')}}
        </el-button>
        <!--提示工程-->
        <el-button
          type="success"
          size="small"
          @click="handlerClickEngine"
        >
          {{$t('largeModel.userGuidance')}}
        </el-button>

        <!--安全校验-->
        <el-button
          type="success"
          size="small"
          @click="handlerClickSafety"
        >
          {{$t('largeModel.safetyCheck')}}
        </el-button>
      </HuilanBasicToolbar>

      <HuilanBasicSearchbar
        :model="searchForm"
        :fields="searchFieldList"
        @search="searchChange"
        @reset="searchReset"
      >
      </HuilanBasicSearchbar>

      <!--大模型列表-->
      <div class="card-container">
        <el-row :gutter="50" v-if="modelList.length > 0">
          <el-col :span="6" v-for="(item,index) in modelList" :key="index" style="margin-bottom: 25px;">
            <div
              class="card-item-container"
              @mousemove="handlerMouseMove(index)"
              @mouseleave="handlerMouseLeave()"
              :class="[currentIndex == index ? 'active' : '']"
              @click="handleCommand('edit',item)"
            >
              <!--图标展示区-->
              <div class="left">
                <img :src="baseURL+item.logo" style="width: 100%;height: 100%" v-if="item.logo !== null && item.logo !== undefined && item.logo !== ''"/>
                <img :src="baseURL+defaultLogo" style="width: 100%;height: 100%" v-else/>
              </div>
              <!--内容展示区-->
              <div class="right">
                <div class="right-top">
                  <div class="name">
                    {{item.name}}
                  </div>
                  <div class="operate">
                    <el-dropdown
                      placement="bottom"
                      @command="handleCommand($event,item)"
                      @visible-change="handlerVisibleChange($event,item)"
                    >
                      <i class="el-icon-more"></i>
                      <el-dropdown-menu slot="dropdown">
<!--                        <el-dropdown-item command="view">{{$t('aiccCommon.view')}}</el-dropdown-item>-->
<!--                        <el-dropdown-item command="edit">{{$t('aiccCommon.edit')}}</el-dropdown-item>-->
                        <el-dropdown-item command="del" v-if="item.isDefault != 1">{{$t('aiccCommon.delete')}}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>

                <div class="right-middle">
                  <!--行业大模型-->
                  <div class="industry" v-if="item.type == 1">
                    {{$t('largeModel.industryLargeModel')}}
                  </div>
                  <!--通用大模型-->
                  <div class="general" v-else>
                    {{$t('largeModel.generalLargeModel')}}
                  </div>
                </div>

                <div class="right-bottom">
                  {{item.remark !== null && item.remark !== '' ? item.remark : $t('largeModel.noIntroduction')}}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>


        <div class="no-data" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" v-else>
          <img :src="baseURL+'/img/noData.png'"/>
          <div class="no-data-message" >
            {{$t('aiccCommon.emptyMsg')}}
          </div>
        </div>
      </div>



      <div class="page-container" style="text-align: right" v-if="modelList.length > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="prev"
          @next-click="next"
          :page-size="page.pageSize"
          layout="total,prev, pager, next,jumper"
          :current-page.sync="page.pageNum"
          :total="page.total"
        >
        </el-pagination>
      </div>

      <!--新增或编辑大模型-->
      <AiccDrawer
        ref="addDrawerRef"
        append-to-body
        :title="isAddOrEdit == 'add' ? $t('largeModel.addLargeModel') : $t('largeModel.editLargeModel')"
        :visible.sync="isOpenAddDrawer"
        size="40%"
        trigger="click"
        @beforeClose="beforeCloseAddDrawer"
      >
        <template v-slot:aiccMain>
          <Add v-if="isOpenAddDrawer" :cur="cur" ref="addFormRef" :clickFlag="clickFlag"/>
        </template>
        <template v-slot:aiccFooter>
          <el-button size="small" @click="closeAddDrawer">{{$t("aiccCommon.btnCancel") }}</el-button>
          <el-button size="small" type="primary" @click="handlerSave" :loading="isFinished" :disabled="clickFlag == 'view'">{{$t("aiccCommon.btnSave") }}</el-button>
        </template>
      </AiccDrawer>

      <!--安全校验-->
      <AiccDrawer
        ref="safetyDrawerRef"
        append-to-body
        :title="$t('largeModel.safetyCheck')"
        :visible.sync="isOpenSafetyDrawer"
        width="550px"
        trigger="click"
        @beforeClose="beforeCloseSafetyDrawer"
      >
        <template v-slot:aiccMain>
          <Safety v-if="isOpenSafetyDrawer"  ref="safetyFormRef" @closeSafetyDrawer="closeSafetyDrawer"/>
        </template>
        <template v-slot:aiccFooter>
          <el-button size="small" @click="closeSafetyDrawer">{{$t("aiccCommon.btnCancel") }}</el-button>
          <el-button size="small" type="primary" @click="handlerSafetySave" :loading="isFinished">{{$t("aiccCommon.btnSave") }}</el-button>
        </template>
      </AiccDrawer>
    </HuilanBasic>


    <HuilanBasic v-if="!processContainer" >
      <Prompt @closePrompt="closePrompt"/>
    </HuilanBasic>
  </div>

</template>

<script>
import Add from './add.vue';
import Safety from './safety.vue';
import Prompt from './prompt.vue';
import {
  modelList,
  modelSaveOrUpdate,
  modelDelete,
} from '@/api/aiccApi/aiccLargeModel/index'
import {baseURL} from "@/api/common";
// import TemplateManage from "@/views/aiccFile/aiccMultiwheeltalk/templateManage/index.vue";
export default {
  components: {
    // TemplateManage,
    Add,
    Safety,
    Prompt
  },
  data(){
    return{
      processContainer:true,
      currentIndex:-1,
      clickFlag:'',
      modelList:[],
      baseURL: baseURL.slice(0, -1),
      searchForm:{
        modelType:'',
        modelName:'',
      },
      page:{
        pageNum:1,
        pageSize:12,
        total:0,
      },
      defaultLogo:'/img/largeModelDefault.png',
      searchFieldList:[
        {
          type:'select',
          placeholder:this.$t('largeModel.modelType'),  //大模型类型
          prop:'modelType',
          dicData:[
            {
              label:this.$t('largeModel.industryLargeModel'),  //行业大模型
              value:'1'
            },
            {
              label:this.$t('largeModel.generalLargeModel'),  //通用大模型
              value:'2'
            }
          ],
        },
        {
          placeholder:this.$t('largeModel.largeModelName'),  //大模型名称
          prop:'modelName',
        },
      ],
      isAddOrEdit:'add',
      isOpenAddDrawer:false,
      cur:{},
      isFinished:false,
      isOpenSafetyDrawer:false,
    }
  },
  mounted(){
    this.getModelList()
  },
  methods:{
    closePrompt(){
      this.processContainer = !this.processContainer
    },

    //获取模型列表
    getModelList(){
      const info = {
        current:this.page.pageNum,
        size:this.page.pageSize,
        name:this.searchForm.modelName,
        type:this.searchForm.modelType
      };
      modelList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.page.total = Data.total;
          this.modelList = Data.records;
        }
      })
    },

    //点击提示工程
    handlerClickEngine(){
      this.processContainer = !this.processContainer
    },

    //点击安全校验
    handlerClickSafety(){
      this.isOpenSafetyDrawer = true;
      this.$refs.safetyDrawerRef.open();
    },
    handlerSafetySave() {
      this.isFinished = true
      this.$refs.safetyFormRef.saveSafetyForm()
    },
    //关闭安全校验抽屉
    closeSafetyDrawer(){
      this.isOpenSafetyDrawer = false;
      this.$refs.safetyDrawerRef.close();
      this.isFinished = false
    },
    beforeCloseSafetyDrawer(){
      this.closeSafetyDrawer()
    },

    //点击新增
    handlerClickAdd(){
      this.isAddOrEdit = 'add';
      this.clickFlag = 'add';
      this.cur = {};
      this.isOpenAddDrawer = true;
      this.$refs.addDrawerRef.open();
      this.isFinished = false;
    },

    //关闭新增抽屉
    closeAddDrawer(){
      this.isOpenAddDrawer = false;
      this.isFinished = false;
      this.$refs.addDrawerRef.close();
    },
    beforeCloseAddDrawer(){
      this.closeAddDrawer()
    },

    //保存
    handlerSave(){
      const component = this.$refs.addFormRef;
      const form = component.form;
      component.$refs.form.validate(flag=>{
        if(!flag){
          return
        }else{
          const JSONObj = {
            header:component.headerArr,
            request:component.requestArr,
          };
          const info = {
            isDefault:form.isDefault,  //模型类型
            name:form.modelName,  //模型名称
            type:form.modelType,  //模型类型
            logo:form.thumbnail,  //模型图标
            id:form.id?form.id:'',  //模型id
            remark:form.introduction,  //备注
            pattern:form.mode.join(","),
            interfaceAddress:form.interfaceAddress,  //接口地址
            content:JSON.stringify(JSONObj),
            agreement:form.agreement
          };
          // if ((component.headerArr.length > 0 || component.requestArr.length > 0) && form.modelType == 1) {
          //   info.content = JSON.stringify(JSONObj);
          // }else if(form.modelType == 1){
          //   info.content = ''
          // }
          this.isFinished = true;
          modelSaveOrUpdate(info).then(res=>{
            if(res.data.code == 200){
              this.isFinished = false;
              this.closeAddDrawer();
              this.$message.success(this.$t('aiccCommon.saveSuccesTips'));
              this.getModelList();
            }
          }).catch(()=>{
            this.isFinished = false;
          })
        }
      })
    },

    handleCommand(command,row){
      if(command == 'edit'){
        this.isAddOrEdit = 'edit';
        this.cur = row;
        this.clickFlag = 'edit';
        this.isOpenAddDrawer = true;
        this.$refs.addDrawerRef.open();
        this.isFinished = false;
      }else if (command == 'view'){
        this.isAddOrEdit = 'view';
        this.cur = row;
        this.clickFlag = 'view';
        this.isOpenAddDrawer = true;
        this.$refs.addDrawerRef.open();
        this.isFinished = false;
      }else if(command == 'del'){
        const info = {
          ids:row.id
        };
        this.$confirm(this.$t('aiccCommon.delTips'), {
          confirmButtonText: this.$t('aiccCommon.confirm'),
          cancelButtonText: this.$t('aiccCommon.btnCancel'),
          type: 'warning'
        }).then(async () => {
          modelDelete(info).then(res=>{
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: this.$t('aiccCommon.delSuccess')
              });
              this.getModelList();
            }
          })
        })
      }
    },
    // handlerVisibleChange(val){
    //
    // },


    handlerMouseMove(index) {
      this.currentIndex = index;
    },
    handlerMouseLeave() {
      this.currentIndex = -1
    },


    //分页相关
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getModelList()
    },
    handleCurrentChange(current) {
      this.page.pageNum = current;
      this.currentPage = current;
      this.getModelList()
    },
    prev(current) {
      this.page.pageNum = current;
      this.getModelList()
    },
    next(current) {
      this.page.pageNum = current;
      this.getModelList()
    },

    //搜索
    searchChange(){
      this.page.pageNum = 1;
      this.getModelList()
    },

    //重置
    searchReset(){
      this.page.pageNum = 1;
      this.searchForm = {
        modelName: '',
        modelType: '',
      };
      this.getModelList()
    },
  },
}
</script>

<style scoped lang="scss">

/deep/ .el-row{
  margin: 5px 0 0 0 !important;
}

/deep/ .el-col{
  padding: 0;
}

.card-container{
  height: calc(100% - 140px);
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  .active{
    outline: 1px solid transparent;
    outline-color: #638ef8;
    box-shadow: 0px 6px 16px 4px rgba(6, 7, 46, 0.08);
  }
  .card-item-container{
    display: flex;
    //align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 16px 4px rgba(6, 7, 46, 0.08);
    padding:20px;
    cursor:pointer;
    box-sizing: border-box;
    .left{
      width: 91px;
      height: 91px;
      border-radius: 10px;
      box-shadow: 0px 4px 7.52px 0.48px rgba(7, 11, 45, 0.15);
      margin-right: 20px;
    }
    .right{
      width: calc(100% - 131px);
      .right-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name{
          font-size: 16px;
          font-family: "Source Han Sans CN";
          color: rgb(7, 11, 45);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        };
      }
      .right-middle{
        margin:12px 0;
        .industry{
          //行业大模型
          padding-left: 10px;
          font-size: 12px;
          font-family: "Source Han Sans CN";
          color: rgb(149, 151, 160);
          border-left: 4px solid rgb(197, 237, 254);
        }
        .general{
          //通用大模型
          padding-left: 10px;
          font-size: 12px;
          font-family: "Source Han Sans CN";
          color: rgb(149, 151, 160);
          border-left: 4px solid rgb(220, 244, 190);
        }
      }

      .right-bottom{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        height: 42px;
      }
    }
  }
}

.no-data-message{
  ont-size: 14px;
  font-family: "Source Han Sans CN";
  color: rgb(149, 151, 159);
  margin-top: 10px;
  text-align: center;
}
</style>
